<template>
  <!-- 学生个人中心页面 -->
  <div class="personal-center">
    <el-container>
      <el-main>
        <el-row>
          <el-col :span="24">
            <el-card shadow="hover" class="profile-card">
              <div class="clearfix">
                <!-- <img :src="stuMstInfo.avatar" alt="Avatar" class="avatar" /> -->
                <div class="text-center">
                  <UserAvatar :img="stuMstInfo.avatar" class="avatar" />
                </div>
                <div class="name">
                  {{ stuMstInfo.nickname }}
                  <div class="tags">
                    <dict-tag
                      :type="DICT_TYPE.SYSTEM_USER_SEX"
                      v-if="stuMstInfo.sex"
                      :value="stuMstInfo.sex"
                    />
                    <el-tag v-if="stuMstInfo.universityFrom">
                      {{ stuMstInfo.universityFrom }}
                    </el-tag>
                    <el-tag v-if="stuMstInfo.majorName">
                      {{ stuMstInfo.majorName }}
                    </el-tag>
                    <el-tag v-if="stuMstInfo.graduationYear">
                      {{ stuMstInfo.graduationYear }}
                    </el-tag>
                    <el-tag v-if="stuMstInfo.universityId">
                      {{ buildSchName }}
                    </el-tag>
                    <el-tag v-if="stuMstInfo.majorId">
                      {{ buildMajName }}
                    </el-tag>
                    <el-tag v-if="stuMstInfo.stuAddr">
                      {{ stuMstInfo.stuAddr }}
                    </el-tag>
                  </div>
                </div>
              </div>

              <div class="bio">
                <div class="left-section">
                  <strong>个人简介：</strong>
                  <span v-if="stuMstInfo.stuDesc === undefined || stuMstInfo.stuDesc == ''">
                    此人很懒，没有个人简介
                  </span>
                  <span v-else>
                    {{ stuMstInfo.stuDesc }}
                  </span>
                  <el-button
                    type="primary"
                    plain
                    @click="openForm('个人信息', stuMstInfo)"
                    style="margin-left: 20px"
                  >
                    <Icon icon="ep:plus" class="mr-5px" /> 完善资料
                  </el-button>
                </div>
                <div class="right-section">
                  <el-button type="success" plain> 我的简历 </el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row class="tab">
          <el-col :span="17">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
              <el-tab-pane label="投递记录" name="first">
                <DeliveryRecord />
              </el-tab-pane>
              <el-tab-pane label="我收藏的职位" name="second">啊啊啊</el-tab-pane>
              <el-tab-pane label="Role" name="third">Role</el-tab-pane>
              <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
            </el-tabs>
          </el-col>
          <el-col :span="7">
              <JobList title="最新职位" :message="latestList"/>
              <JobList title="推荐职位" :message="recommendList"/>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
  <!-- 表单弹窗：添加/修改 -->
  <StuMstInfoForm ref="formRef" @success="getMsg" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import StuMstInfoForm from './StuMstInfoForm.vue'
import { StuMstApi, StuMstVO } from '@/api/dbit/stumst'
import { MajInfoApi, MajInfoVO } from '@/api/dbit/majinfo'
import { SchInfoApi, SchInfoVO } from '@/api/dbit/schinfo'
import { JobInfoApi } from '@/api/dbit/jobinfo'
import UserAvatar from '@/views/Profile/components/UserAvatar.vue'
import DeliveryRecord from './DeliveryRecord.vue' // 导入投递记录模块
import JobList from './JobList.vue'

const loading = ref(true) // 列表的加载中
const userId = ref() // 登录用户的id
const stuMstInfo = reactive({
  stuId: undefined,
  stuName: undefined,
  stuEdu: undefined,
  universityId: undefined,
  universityFrom: undefined,
  majorId: undefined,
  majorName: undefined,
  graduationYear: undefined,
  stuAddr: undefined,
  stuDesc: undefined,
  nickname: undefined,
  avatar: undefined,
  sex: undefined,
  jobTitleId: undefined
})
const buildSchName = ref('')
const buildMajName = ref('')
const activeName = ref('first')
const recommendList = ref([]) // 推荐岗位列表
const latestList = ref([]) // 最新岗位列表

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, stuMstInfo) => {
  formRef.value.open(type, stuMstInfo)
}

/** 查询列表 */
const getMsg = async () => {
  loading.value = true
  try {
    const data = await StuMstApi.getStuMst(userId.value)
    if (data.jobTitleId != null && data.jobTitleId.length > 0) {
      data.jobTitleId = data.jobTitleId.split(';')
      // data.jobTitleId = data.jobTitleId.map(Number)
    }
    // 将data中的所有数据复制到stuMstInfo中
    Object.assign(stuMstInfo, data)
    // 判断该学生是不是共建院学生
    if (stuMstInfo.universityId !== undefined && stuMstInfo.universityId !== null) {
      const buildSch = await SchInfoApi.getSchInfo(stuMstInfo.universityId)
      buildSchName.value = buildSch.schName
      const buildMaj = await MajInfoApi.getMajInfo(stuMstInfo.majorId)
      buildMajName.value = buildMaj.majName
    }
  } finally {
    loading.value = false
  }
}
/* 获取推荐岗位列表 */
const getRecommendJobInfo = async () => {
  const data = await JobInfoApi.recommendJobInfo(userId.value)
  recommendList.value = data
}
/* 获取最新岗位列表 */
const getLatestJobInfo = async () => {
  const data = await JobInfoApi.latestJobInfo()
  latestList.value = data
  console.log(data)
}

/** 初始化 **/
onMounted(() => {
  const id = localStorage.getItem('userId')
  userId.value = id
  getMsg() // 获取个人信息
  getRecommendJobInfo() // 获取推荐岗位
  getLatestJobInfo() // 获取最新岗位
})
</script>

<style scoped>
.clearfix {
  display: flex;
}

/* .text-center {
  position: relative;
  height: 120px;
  text-align: center;
} */

.personal-center {
  width: 100%;
}

.el-header {
  line-height: 60px;
  text-align: center;
}

.profile-card {
  margin-bottom: 20px;
}

.avatar {
  float: left;
  width: 120px;
  height: 120px;
  margin-right: 20px;
  border-radius: 50%;
  object-fit: cover;
}

.name {
  display: inline-block;
  margin-top: 20px;
  font-size: 20px;
}

.tags {
  margin-top: 20px;
}

.tags * {
  margin-right: 10px;
}

.bio {
  display: flex;
  margin-top: 20px;
  justify-content: space-between;
}

.right-section {
  text-align: center;
}

.recommend-job{
  width: 95%;
  margin-left: 20px;
  border-radius: 10px;
}

.recommend-job .empty{
  height: 50px;
  line-height: 33px;
  color: #333;
  text-align: center;
  background-color: #fff;
}

.recommend-job .title{
    padding: 10px;
    font-size: 20px;
    font-weight: 600;
    line-height: 33px;
    color: #333;
    background-color: #fff;
    border-radius: 5px;
}

.recommend-job .item{
  height: 99px;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 5px;
}

.recommend-job .item .top{
  height: 53px;
}

.recommend-job .item .top .first{
  display: flex;
  height: 21px;
  justify-content: space-between;
}

.recommend-job .item .top .first .job-name{
    display: inline-block;
    height: 20px;
    max-width: 200px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 400;
    color: #333;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recommend-job .item .top .first .job-salary{
    font-size: 14px;
    font-weight: 400;
    color: #ea4e07;
    text-align: right;
    flex: auto;
}

.recommend-job .item .top .second{
  height: 28px;
  padding-bottom: 10px;
  margin-top: 3px;
  margin-bottom: 1px;
}

.recommend-job .item .top .second span{
    display: inline-block;
    padding: 0 5px;
    font-size: 12px;
    font-weight: 400;
  color: #bbb;
}

.recommend-job .item .bottom{
  height: 36px;
}

.recommend-job .item .bottom .company{
  display: flex;
  align-items: center;
}

.recommend-job .item .bottom .company img{
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.recommend-job .item .bottom .company span{
    display: inline-block;
    max-width: 250px;
    margin-left: 5px;
    overflow: hidden;
    line-height: 34px;
    color: #333;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: text-top;
}
</style>
